<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #finance").addClass("open-menu");
</script>
<div class="boxed clearfix">
  <div class="common-tit">
    <h2>财务统计</h2>
    <span>财务管理 > 财务统计</span>
  </div>
  <div class="ad-box">
    <div class="atten-box clearfix">
      <div class="atten-sel">收入<em></em></div>
      <div>支出<em></em></div>
    </div>
    <div class="fina-stacon sel-stacon">
      <%= form_for(@finance, :url => admin_finances_path, method: :post)  do |f|%>
      <%= f.hidden_field :finance_type, value: "收入" %>
      <ul class="stati-box">
        <li class="statis">
          <div class="stati-tit">
            <strong>时间:</strong>
          </div>
           <div class="date-ibox">
              <input type="text" name="finance[setdate]" class="date-input" readOnly="true" placeholder="年月日">
          </div>
        </li>
        <li class="statis" id="inCategory">
        <input type="text"  name="finance[finance_category]" id="finance_income_category">
          <div class="stati-tit">
            <strong>收入类型:</strong>
          </div>
          <div class="list-box">
            <div class="downbtn">
              <span>请选择</span>
              <em></em>
            </div>
            <ul class="dropdown-menu" >
              <% Finance::INCOME_CATEGORY.each do |key, value|%>
                <li data_id="<%= key %>"><%= value %></li>
              <% end %>
            </ul>
          </div>
        </li>
        <li class="statis">
          <input type="text" name="studio_ids" id="income_studio_ids" />
          <div class="stati-tit">
            <strong>选择分店:</strong>
          </div>
          <div class="multiselect-box">
            <div class="mul-downbtn">
              <em></em>
              <input type="text" placeholder="搜索">
            </div>
            <div class="multiselect-down">
              <ul>
                <% @studios.each do |studio| %>
                  <li>
                    <span></span>
                    <strong data_id="<%= studio.id %>"><%= studio.name %></strong>
                  </li>
                <%end%>
              </ul>
              <div class="mul-btn clearfix">
                <div class="mul-confirm">确认</div>
                <div class="mul-cancel">取消</div>
              </div>
            </div>
          </div>
        </li>
        <li class="statis">
          <div class="stati-tit">
            <strong>收入款项:</strong>
          </div>
          <input type="text" name="amount" >	
          <span>元</span>
        </li>
        <li>
          <div class="stati-tit">
            <strong>备注:</strong>
          </div>
          <input type="text" name="finance[remark]" >
        </li>
      </ul>
      <div><%= f.submit '确认', class: "pay-btn" %></div>
      <%end%>
    </div>
    <div class="fina-stacon">
      <%= form_for(@finance, :url => admin_finances_path, method: :post)  do |f|%>
      <%= f.hidden_field :finance_type, value: "支出" %>
      <ul class="stati-box">
        <li class="statis">
          <div class="stati-tit">
            <strong>时间:</strong>
          </div>
          <div class="date-ibox">
              <input type="text" name="finance[setdate]" class="date-input" readOnly="true" placeholder="年月日">
          </div>
        </li>
        <li class="statis" id="exCategory">
        <input type="text"  name="finance[finance_category]" id="finance_expense_category">
          <div class="stati-tit">
            <strong>支出类型:</strong>
          </div>
          <div class="list-box">
            <div class="downbtn">
              <span>请选择</span>
              <em></em>
            </div>
            <ul class="dropdown-menu">
              <% Finance::EXPENSE_CATEGORY.each do |key, value|%>
                <li data_id="<%= key %>"><%= value %></li>
              <% end %>
            </ul>
          </div>
        </li>
        <li class="statis">
          <input type="text" name="studio_ids" id="expense_studio_ids" />
          <div class="stati-tit">
            <strong>选择分店:</strong>
          </div>
          <div class="multiselect-box">
            <div class="mul-downbtn">
              <em></em>
              <input type="text" placeholder="搜索">
            </div>
            <div class="multiselect-down">
              <ul>
                <% @studios.each do |studio| %>
                  <li>
                    <span></span>
                    <strong data_id="<%= studio.id %>"><%= studio.name %></strong>
                  </li>
                <%end%>
              </ul>
              <div class="mul-btn clearfix">
                <div class="mul-confirm">确认</div>
                <div class="mul-cancel">取消</div>
              </div>
            </div>
          </div>
        </li>
        <li class="statis">
          <div class="stati-tit">
            <strong>支出款项:</strong>
          </div>
          <input type="text" name="amount" >	
          <span>元</span>
        </li>
        <li>
          <div class="stati-tit">
            <strong>备注:</strong>
          </div>
          <input type="text" name="finance[remark]" >
        </li>
      </ul>
      <div><%= f.submit '确认', class: "pay-btn" %></div>
      <% end %>
    </div>
  </div>	
</div>

<script src="/assets/js/common-list.js"></script>
<script>
$(function(){
  $(".date-input").date_input();
});
/* 单选下拉列表 */
$(".single-downbtn").on("click", function() {
  if ($(this).next(".single-dropdown").hasClass("menuopen")) {
    $(this).next(".single-dropdown").removeClass("menuopen");
  } else {
    $(this).next(".single-dropdown").addClass("menuopen");
    $(this).parent().hover(function() {

    }, function() {
      $(this).children(".single-dropdown").removeClass("menuopen");
    });
    $(".single-box .menuopen li").on("click", function() {
      $(this).parent().parent().removeClass("menuopen");
      $(this).parent().parent().parent().find("span").text($(this).text());
      //$(this).parent().parent().find("input").val("");
      $(".single-dropdown li").removeClass("mul-hide");
    });
    $(this).next("div").find("input").on('input',function(){ 
      console.log($(this));
      if ($(this).val() != "") {
        console.log($(this).val());
        $(".single-dropdown li").addClass("mul-hide");
        console.log($($(".single-dropdown li:contains(" + $(this).val() + ")")).removeClass("mul-hide"));
      } else {
        $(".single-dropdown li").removeClass("mul-hide");
      }
    })
  }
}); 
$("#exCategory li").on("click", function() {
  $("#exCategory").find("input").val($(this).text());
})
$("#inCategory li").on("click", function() {
  $("#inCategory").find("input").val($(this).text());
})
// 多选
$(".mul-downbtn").on("click", function() {
  if (!$(this).next().hasClass("menuopen")) {
    $(this).next().addClass("menuopen");
  }
});
$(".multiselect-down li").on("click", function() {
  if ($(this).hasClass("mul-select")) {
    $(this).removeClass("mul-select");
  } else {
    $(this).addClass("mul-select");
  };
});
$(".mul-confirm").on("click", function() {
  var arr = [];
  for (var i = 0; i < $(this).parent().parent().find(".mul-select").length; i++) {
    arr.push($($(this).parent().parent().find(".mul-select")[i]).children("strong").attr("data_id"));
  };
  console.log(arr);
  $(this).parent().parent().parent().parent().find("input").eq(0).val(arr);
  // 在此处加入ajax 提交数据
  $(this).parent().parent().removeClass("menuopen");
})
$(".mul-cancel").on("click", function() {
  $(this).parent().parent().removeClass("menuopen");
})
$(".mul-downbtn input").on('input',function(e){
  if ($(this).val() != "") {
    // console.log($(this).val());
    $(".multiselect-down li").addClass("mul-hide");
    $($(".multiselect-down li:contains(" + $(this).val() + ")")).removeClass("mul-hide");
  } else {
    $(".multiselect-down li").removeClass("mul-hide");
  }
}); 
$(".atten-box div").on("click", function() {
  $(this).addClass("atten-sel").siblings().removeClass("atten-sel");
  $(".fina-stacon").eq($(this).index()).addClass("sel-stacon").siblings().removeClass("sel-stacon");
})
</script>
